<template>
    <div>
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="loadings" success-text="刷新成功" @refresh="onRefresh">


            <!-- 导航栏标题 -->
            <van-nav-bar title="更多" left-arrow @click-left="onClickLeft" />

            <!-- 搜索框 -->
            <van-search @search="onSearch" error-message show-action v-model="value" background="#fff" shape="round"
                placeholder="搜索店面" />

            <van-list v-model:loading="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad">
                <van-card @click="$router.push('/home/guide')" v-for="item in footList" :key="item.id" :num="item.sales" :title="item.title"
                    :thumb="item.images">
                    <template #tags>
                        <van-tag plain type="primary">“{{ item.textw }}”</van-tag>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <b style="font-size: 16px;color: #1855a5;">4.5<span
                                style="font-size: 12px;color: #1855a5;">超棒</span></b>
                        <p style="color: #969595;">{{ item.subhead }} ￥{{ item.price }}/人</p>
                        <p>
                            <van-tag type="danger">券</van-tag>
                            <b style="color: red;font-weight: bold;">￥{{ item.amounta }}</b>
                            <van-tag color="#ffe1e1" text-color="#ad0000">{{ item.amountza }}折</van-tag>
                            <b>{{ item.textt }}</b>
                        </p>
                        <p>
                            <van-tag type="danger">团</van-tag>
                            <b style="color: red;font-weight: bold;">￥{{ item.amountb }}</b>
                            <van-tag color="#ffe1e1" text-color="#ad0000">{{ item.amountzb }}折</van-tag>
                            <b>{{ item.textr }}</b>
                        </p>
                    </template>
                </van-card>
            </van-list>


            <!-- 回到顶部 -->
            <van-back-top right="0" bottom="60px" />
        </van-pull-refresh>

    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import httpApi from '@/http/index';
import { showToast } from 'vant';
const onClickLeft = () => history.back();

const footList = ref([])
const value = ref('');
console.log(value);

// 查询所有美食推荐列表
onMounted(() => {
    httpApi.IndexApi.queryfootsList().then(res => {
        console.log(res);
        footList.value = res.data.data
    })
})

// 监听输入框值的变化
watch(value, (newValue) => {
    console.log(newValue); // 在控制台输出输入框的新值
});

//搜索
const onSearch = async (value) => {
    try {

        const res = await httpApi.IndexApi.searchMore(value);
        console.log(res);
        footList.value = res.data.data
    } catch (error) {
        console.error(error);
    }
};




// 下拉刷新功能
const loadings = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loadings.value = false;
    }, 1000);
}







// 底部刷新
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 500);
}
</script>

<style lang="scss" scoped></style>